<template>
    <h1>我是 APP 组件</h1>

    <h1>$store.state.num: {{ $store.state.num }}</h1>
    <h1>mapState 简化: {{ num }}</h1>

    <hr />
    <button @click="setNum">修改 num 的值 (错误版)</button>
    <button @click="setNum2">修改 num 的值 ($store.commit('addNum'))</button>
    <button @click="setNum3">
        修改 num 的值 (...mapMutations(['addNum']))
    </button>

    <hr />
    <button @click="setNum4">异步修改 num 的值 ($store.dispatch('asyncAddNum'))</button>
    <button @click="setNum5">异步修改 num 的值 (...mapActions(['asyncAddNum']))</button>
</template>

<script>
// 1. 引入 mapActions 辅助函数
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    data() {
        return {};
    },
    methods: {
        ...mapMutations(["addNum"]),
        // 2. 结构 vuex 中 actions 中的一些方法
        ...mapActions(['asyncAddNum']),

        setNum() {
            // this.$store.state.num++
            // this.num++
        },

        setNum2() {
            // console.log(this.$store)
            this.$store.commit("addNum");
        },

        setNum3() {
            this.addNum();
        },

        setNum4() {
            this.$store.dispatch('asyncAddNum')
        },

        setNum5 () {
            // 3. 结构 完成后, 我们可以直接通过 this.XXX 去调用 vuex 中 actions 内的一些方法
            this.asyncAddNum()
        }
    },
    computed: {
        ...mapState(["num", "num3"]),
    },
};
</script>

<style></style>
